<template>
  <div class="case animate__animated animate__bounceInUp">
    <div class="case-aside" :style="{width:asideW}">
      <div class="aside-box" @click="changeCaseModule(item.alias)" :class="item.status?'isCheck':''" v-for="item in self.aside" :key="item.key">
        <div class="warp-img">
          <img :src="item.cover" alt="img"/>
        </div>
        <div class="warp-title">{{ item.title }}</div>
      </div>
    </div>
    <div class="case-content">
      <div class="case-header">
        <div class="case-close">
          <a-button v-if="!zoom" @click="changeAside">
            <StepBackwardOutlined/>
          </a-button>
          <a-button v-else @click="changeAside">
            <StepForwardOutlined/>
          </a-button>
          <a-button @click="close">
            <CloseCircleOutlined/>
          </a-button>
        </div>
        <div class="case-title"> {{ self.header.title }}</div>
        <div class="case-date"> {{ self.header.time }}</div>
      </div>
      <div class="case-warp">
        <CaseWarp :alias="self.alias"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, watch,onMounted} from "vue";
import CaseWarp from '../common/case-warp.vue'

watch(() => props.show, (val) => {
  if (val) {
    //如果侧栏是关闭的 就重新打开
    zoom.value && changeAside()
  }
})

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  alias:{
    type:String,
    default:''
  }
})
const emits = defineEmits(['close'])
const close = () => {
  emits('close')
}

let zoom = ref(false)
let asideW = ref('250px')
let self = reactive({
  aside: [
    {
      key: 1,
      title: "图片瀑布流效果",
      cover: 'https://p.qlogo.cn/hy_personal/3e28f14aa05168424344559ea2a9047e49c8c12f687ad862169bf05a21302918/0.png',
      status: false,
      time:'2022/06/25',
      alias: '2011'
    },
    {
      key: 2,
      title: "js拖拽功能示例",
      cover:'https://p.qlogo.cn/hy_personal/3e28f14aa05168424344559ea2a9047e88be9fade5143530391d20f7c51870e4/0.png',
      status: false,
      time:'2022/07/13',
      alias: '2012'
    },
  ],
  alias:'',
  header:{
    title:'',
    time:""
  }
})

//侧边栏缩放/拉伸
const changeAside = () => {
  zoom.value = !zoom.value
  if (zoom.value) {
    asideW.value = '0px'
  } else {
    asideW.value = '250px'
  }

}
//侧边栏模块选中改变 （侧栏点击）
const changeCaseModule = (alias) => {
  self.aside.forEach( (item) =>{
    if (item.alias == alias){
      item.status = true
      self.header.title = item.title
      self.header.time = item.time
    }else {
      item.status = false
    }
  })
  self.alias = alias
}

onMounted(()=>{
  //改变侧栏的状态 同时把文章内容传给主体部分 （外部点击）
  changeCaseModule(props.alias)
})


</script>

<style scoped lang="less">
.case {
  width: 100%;
  height: calc(100vh - 70px);
  background-color: rgb(242,242,242);
  position: fixed;
  top: 70px;
  left: 0;
  display: flex;
}

.case-aside {
  height: 100%;
  transition: all 0.5s;

  .aside-box {
    width: 230px;
    height: 180px;
    margin: 15px 10px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    overflow: hidden;
    cursor: pointer;

    &:hover {
      opacity: 0.8;
      border: 1px #1f1f1f dashed;
      color: #1f1f1f;
    }
    .warp-img, .warp-img img {
      width: 230px;
      height: 150px;
    }
    .warp-title {
      width: 100%;
      height: 30px;
      text-align: center;
      font-weight: bold;
    }
  }
  .isCheck {
    box-sizing: border-box;
    border: 1px #007fff dashed;
    color: #4397ec;
  }

}

.case-content {
  padding: 15px;
  flex: 1;
  background-color: #fff;

  .case-header {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px #6c6c6c dashed;

    .case-close button {
      margin: 0 5px;
    }

    .case-title {
      font-size: 18px;
      font-weight: bold;

    }

    .case-date {
      color: #6c6c6c;
      margin-right: 15px;
    }
  }

  .case-warp {
    width: 100%;
    height: calc(100% - 45px);
    background-color: #fff;
    overflow: scroll;
    background-image: linear-gradient(90deg,rgba(60,10,30,.04) 3%,transparent 0),
    linear-gradient(1turn,rgba(60,10,30,.04) 3%,transparent 0);
    background-size: 20px 20px;
    background-position: 50%;
  }

}

</style>